<template>
    <el-dialog :modal-append-to-body="false" title="选择表字段（请双击进行选择）" :visible.sync="isCommonModalTemplate">
        <avue-form ref="form" :option="queryOption" v-model="searchForm">
            <template slot="menuForm" style="text-align: right;">
                <el-button icon="el-icon-search" type="primary" @click="handleSubmit">搜 索</el-button>
                <el-button icon="el-icon-delete" @click="handleEmpty">清 空</el-button>
            </template>
        </avue-form>
        <avue-crud ref="crud" :data="data" :option="tableOption" :search.sync="search" @search-change="searchChange"
            :page.sync="page" @on-load="onLoad" @row-dblclick="rowDbclick" style="margin-bottom: 20px;"></avue-crud>
    </el-dialog>
</template>
<script>
    import Helpers from "@/util/helpers";
    export default {
        components: {

        },
        data() {
            return {
                isCommonModalTemplate: false,
                data: [
                    {
                        tableName: 'tableName1',
                        tableComment: 'tableComment1',
                        createdNameBy: 'createdNameBy1',
                        createdDate: 'createdDate1'
                    }
                ], //表格数据
                tableOption: {
                    border: true, //表格外框线是否显示
                    stripe: true, //表格是否显示条纹
                    header: true, //表格头部是否显示
                    index: true, //表格数据序号
                    page: true, //表格分页是否显示
                    addBtn: false, //新增按钮是否显示
                    menu: false, //表格操作栏是否显示
                    refreshBtn: false, //刷新按钮是否显示
                    columnBtn: false, //控制表格列是否显示按钮是否显示
                    searchMenuSpan: 6, //搜索按钮所占宽度
                    searchMenuPosition: 'right', //搜索按钮位置
                    column: [
                        {
                            label: "字段名",
                            prop: "fieldName"
                        }, {
                            label: "字段注释",
                            prop: "fieldComment"
                        }, {
                            label: "表名",
                            prop: "tableName"
                        }, {
                            label: "表注释",
                            prop: "tableComment"
                        }
                    ], //表格列配置
                    selection: false, //表格是否多选
                }, //表格属性
                page: {
                    pageSize: 20,
                    pagerCount: 5,
                    currentPage: 1,
                    total: 0,
                }, //表格分页
                selectedRows: [], //表格选中行数据
                searchForm: {}, //表格查询参数
                tableNameList: [],
                model: {},
                queryOption: {
                    labelWidth: 120,
                    column: [
                        {
                            label: '表名',
                            prop: 'tableName',
                            type: 'select',
                            dicData: []
                        }
                    ]
                }
            }
        },
        mounthed() {

        },

        methods: {
            modalShow(data) {
                setTimeout(() => {
                    this.dataSet = data;
                    this.isCommonModalTemplate = true;
                    let dataSet = this.dataSet.slice(0);
                    this.tableNameList = this._map(dataSet, (item) => {
                        return {
                            label: item.tableComment,
                            value: item.tableName,
                        }
                    });
                    this.queryOption.column[0].dicData = this.tableNameList;
                    this.searchForm.tableName = this._get(this.tableNameList, '[0].tableName', '');
                }, 500);
            },

            /**
             * 清空按钮事件
             */
            resetForm() {
                setTimeout(() => {
                    this.searchForm.tableName = this._get(this.tableNameList, '[0].tableName', '');
                }, 50);
            },

            /**
             * 首次加载表格
             */
            onLoad() {
                this.page.total = 1;
                this.page.currentPage = 1;
                this.createRowData();
            },

            createRowData() {
                // let dataSource = {
                //     rowCount: null,
                //     getRows: (params) => {
                //         let pageNum = this.gridApi.paginationGetCurrentPage() + 1;
                //         this.searchParam['tableName'] = this.model.tableName;
                //         let paramMap = Helpers.SearchFormSubmit(pageNum, this.PAGE_SIZE, {}, this.searchParam, params.sortModel);
                //         this.httpService.post(Config.API_URL.COMMON_TABLE.FIND_PAGING_INFO_LIST_URL, paramMap,
                //             (successful, dataSet, res) => {
                //                 if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                //                     var rowsThisPage = dataSet.data.rows;
                //                     rowsThisPage.length ? this.gridApi.hideOverlay() : this.gridApi.showNoRowsOverlay();
                //                     var lastRow = dataSet.data.total || 0;
                //                     this.gridOptions.infiniteInitialRowCount = lastRow;
                //                     params.successCallback(rowsThisPage, lastRow);
                //                 } else {
                //                     this.$message({
                //                         showClose: true,
                //                         message: dataSet.message,
                //                         type: 'success'
                //                     });
                //                 }
                //             }, (successful, msg, err) => {
                //                 this.$message({
                //                     showClose: true,
                //                     message: msg,
                //                     type: 'error'
                //                 });
                //             });
                //     }
                // };
                // this.gridApi.setDatasource(dataSource);
            },

            /**
             * 双击事件
             */
            rowDbclick(row) {
                let selectRows = $event.data;
                //获取选中表注释，使用-截取来获取表别名，再匹配到insideCode
                let tableNameAndAlias = $('#tableName').find('.mat-select-value-text span').text();
                let tableNameList = tableNameAndAlias.split('-');
                if (tableNameList.length === 1) {
                    let findNode = _.find(this.tableNameList, { 'tableName': this.model.tableName });
                    selectRows['insideCode'] = findNode.insideCode;
                    this.submitEvent.emit('select');
                } else if (tableNameList.length === 2) {
                    let tableAlias = _.get(tableNameList, '[1]', '');
                    let findNode = _.find(this.tableNameList, { 'tableName': this.model.tableName, 'tableAlias': tableAlias });
                    selectRows['insideCode'] = findNode.insideCode;
                    selectRows['tableAlias'] = findNode.tableAlias;
                    this.$emit('singleChoice', selectRows);
                } else {
                    toastr.error('表别名中有 - 字符，请检查后重新输入!');
                }
            },
            /**
             * 隐藏模态框
             */
            hideModal() {
                this.isCommonModalTemplate = false;
            },

            searchChange(params, done) {
                done();
                this.$message.success(JSON.stringify(params));
            },

        }
    }
</script>